<script setup>
import {getCurrentInstance, h, onMounted, ref} from "vue";
import api from "@/request/apis.js";
import {post} from "@/config/Request.js";
import JsonEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';

const props = defineProps(["bizId", "bizType"])

const processTableData = ref([]);

onMounted(() => {
  queryProcessList();

});

const queryProcessList = async () => {
  processTableData.value = await api.queryProcessList();
}

const processVersionTableData = ref([]);
const queryProcessVersionList = async () => {
  if (!processVersionTableData.value) {
    return;
  }
  const data = await api.queryProcessVersionRelationList(processId.value, props.bizType);
  // console.log(data);
  // this.$set(this, "tableData", data);
  processVersionTableData.value = data;
}
const processId = ref();
const processClick = (row) => {
  processId.value = row.id;
  queryProcessVersionList();
}
const relationModel = ref({});
const relationParamVisible = ref(false);
const processVersion = ref();

const relationId = ref();
const relation = (row) => {
  relationParamVisible.value = true;
  relationModel.value.params = row.params;
  processVersion.value = row.processVersion;
  relationId.value = row.relationId;
  if (!editor.value) {
    setTimeout(() => {
      initJsonEditor();
    }, 0);
  } else {

    editor.value.set(JSON.parse(relationModel.value.params));
  }

}

const saveRelation = async () => {

  const jsonFieldValue = editor.value.getText();

  await api.saveProcessRelationConfig({
    bizId: props.bizId, bizType: props.bizType,
    processId: processId.value,
    processVersion: processVersion.value,
    params: jsonFieldValue,
    id: relationId.value
  });
  relationModel.value = {};
  relationParamVisible.value = false;
  await queryProcessVersionList();
}

const removeRelation = async (row) => {
  await api.removeRelation(row.relationId);
  await queryProcessVersionList();
}

const editor = ref();

const initJsonEditor = () => {
  const container = document.getElementById("jsoneditor");

  const options = {
    "modes": ["code", "tree", "form", "text", "preview"],
    "mode": "code"
  }
  editor.value = new JsonEditor(container, options);
  // const initJson = {};
  // editor.value.set(initJson);
  editor.value.set(JSON.parse(relationModel.value.params) || {});

}
</script>

<template>
  <el-container>
    <el-aside width="250px">

      <el-row>
        <el-col :span="20">
        </el-col>
        <el-col :span="4">
          <el-button @click="queryProcessList()" type="primary" size="small">刷新</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
              :data="processTableData"
              stripe
              border
              fit
              highlight-current-row
              :onCell-click="processClick"
              style="width: 100%">
            <el-table-column
                fixed
                prop="processName"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="processCode"
                label="编码">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>


    </el-aside>
    <el-main>
      <el-row>
        <el-col :span="24">
          <el-button @click="queryProcessVersionList()" type="primary" size="small">刷新</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table
              :data="processVersionTableData"
              style="width: 100%">
            <el-table-column
                fixed
                prop="processVersion"
                label="版本">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>

            <el-table-column
                prop="latestFlag"
                label="latest"
            >
              <template #default="scope">
                <el-tag
                    :type="scope.row.latestFlag === '1' ? 'latest' : ''"
                    disable-transitions
                >{{ scope.row.latestFlag == '1' ? 'latest' : '' }}
                </el-tag
                >
              </template>
            </el-table-column>

            <el-table-column
                prop="disableFlag"
                label="启停状态"
            >
              <template #default="scope">
                <el-tag
                    :type="scope.row.disableFlag === '0' ? '启用' : '停用'"
                    disable-transitions
                >{{ scope.row.disableFlag == '0' ? '启用' : '停用' }}
                </el-tag
                >
              </template>
            </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="200">
              <template #default="scope">

                <el-button v-if="scope.row.relationFlag" @click="relation(scope.row)" type="default" size="small">
                  修改
                </el-button>
                <el-button v-if="!scope.row.relationFlag" @click="relation(scope.row)" type="default" size="small">
                  关联
                </el-button>
                <el-button v-if="scope.row.relationFlag" @click="removeRelation(scope.row)" type="default" size="small">
                  删除
                </el-button>
                <!--                <el-button @click="relation(scope.row)" type="default" size="small">关联</el-button>-->
              </template>
            </el-table-column>


          </el-table>

        </el-col>
      </el-row>
    </el-main>

    <el-dialog v-model="relationParamVisible" width="1000px">
      <el-form :model="relationModel">
        <el-form-item label="入参">
          <!--          <el-input v-model="relationModel.params" type="textarea"/>-->
          <div id="jsoneditor" ref="jsonEditor" style="width: 100%; height: 600px;"></div>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="relationParamVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRelation">确 定</el-button>
      </div>

    </el-dialog>

  </el-container>

</template>

<style scoped>

</style>